<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>棒棒糖</title>
		<style>
			/* 画圆 */
			#d1{
				width: 500px;
				height: 500px;
				/* 画圆：边框、背景色 */
				background-color: #ffaa00;
				/* 边框倒角条件：边框或者背景色 */
				border-radius: 50%;
				/* 微调定位 */
				position: relative;
				left: 300px;/* x轴  横向 */
				top: 40px; /* y轴  纵轴*/
			}
			#d2{
				width: 400px;
				height: 400px;
				/* 画圆：边框、背景色 */
				background-color: #f00;
				/* 边框倒角条件：边框或者背景色 */
				border-radius: 50%;
				/* 定位属性：元素直接定位到页面上 */
				/* 相对定位：相对于父级元素进行定位 ;网页X Y轴*/
				position: relative;
				left: 50px;/* x轴  横向 */
				top: 50px; /* y轴  纵轴*/
			}
			#d3{
				width: 300px;
				height: 300px;
				/* 画圆：边框、背景色 */
				background-color: #00ffaa;
				/* 边框倒角条件：边框或者背景色 */
				border-radius: 50%;
				position: relative;
				left: 50px;/* x轴  横向 */
				top: 50px; /* y轴  纵轴*/
			}
			/* 棍子 */
			#p1{
				width: 40px;
				height: 800px;
				background-color: antiquewhite;
				/* 倾斜  转换属性：旋转值 */
				transform: rotate(-30deg);
				/* 微调定位 */
				position: relative;
				left: 853px;
				top: -63px; 
			}
			#p2{
			    width: 200px;
			    height: 100px;
			    border-bottom: 4px solid brown;
			    border-radius: 50%;
			    position: absolute;
			    bottom: 100px;
			    left: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 画三个圆 -->
		<div id="d1">
			<div id="d2">
				<div id="d3"></div>
			</div>
		</div>
		<!-- 画棍 -->
		<p id="p1">
			<p id="p2"></p>
		</p>
	</body>
</html>